<template>
  <div>
    <el-popover
      placement="bottom"
      :width="300"
      trigger="click"
    >
    <template #default>
      <slot></slot>
    </template>

    <template #reference>
      <el-badge :value="value" :max="max" :is-dot="isDot">
        <component :is="`el-icon-${toLine(icon)}`"></component>
      </el-badge>
    </template>
  </el-popover>
  </div>
</template>
<script lang="ts" setup>
import { toLine } from '../../../utils'

let props = defineProps({
  // 自定义图标
  icon: {
    type: String,
    default: 'Bell'
  },
  // 消息数量
  value: {
    type: [String, Number],
    default: 12
  },
  // 消息的最大值
  // 超过最大值会显示 max+
  max: {
    type: Number,
    default: 99
  },
  // 是否只显示一个小圆点
  isDot: {
    type: Boolean,
    default: false
  }
}) 
</script>
<style lang="scss" scoped>
</style>